<template>
    <div class="module">
        <!--<el-tabs v-model="activeMemberType" @tab-click="onSwitchMemberType(activeMemberType)" class="memner_tab">-->
            <!--<el-tab-pane name="platform">-->
                <!--<span slot="label">平台会员<MarkRemind :tipsNum="this.memberTips.memberCountMap.memberCheckPendingTotalCount" class="bid_tips"></MarkRemind></span>-->
                <!--<div class="clear display_style">-->
                    <!--<el-radio-group v-model="memberStatus.platform" class="left" @change="onSwitchMemberStatus" size="small">-->
                        <!--<el-radio-button label="0">全部</el-radio-button>-->
                        <!--<el-radio-button label="1">联系人信息</el-radio-button>-->
                        <!--<el-radio-button label="2">企业认证<MarkRemind :tipsNum="this.memberTips.memberCountMap.enterpriseCheckPendingCount" class="bid_tips"></MarkRemind></el-radio-button>-->
                        <!--<el-radio-button label="3">业务授权<MarkRemind :tipsNum="this.memberTips.memberCountMap.agentTreasurerCheckPendingCount" class="bid_tips"></MarkRemind></el-radio-button>-->
                        <!--<el-radio-button label="4">账户绑定</el-radio-button>-->
                        <!--<el-radio-button label="5">认证完成</el-radio-button>-->
                    <!--</el-radio-group>-->
                    <!--<div class="check_bill_int">-->
                        <!--<el-input placeholder="企业名称/联系人/联系方式/关联中介/渠道代理/邀请人" v-model="searchText" clearable @clear="loadData()"></el-input>-->
                        <!--<el-button type="primary" size="small" @click="loadData()">搜索</el-button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</el-tab-pane>-->
            <!--<el-tab-pane name="fumin" class="fumin_tab">-->
                <!--<span slot="label">富民会员<MarkRemind :tipsNum="this.memberTips.fBankFailedCount" class="bid_tips"></MarkRemind></span>-->
                <!--<div class="clear">-->
                    <!--<el-radio-group v-model="memberStatus.fumin" class="left" @change="onSwitchMemberStatus">-->
                        <!--<el-radio-button label="0">全部</el-radio-button>-->
                        <!--<el-radio-button label="1">审核通过</el-radio-button>-->
                        <!--<el-radio-button label="2">审核失败<MarkRemind :tipsNum="this.memberTips.fBankFailedCount" class="bid_tips"></MarkRemind></el-radio-button>-->
                    <!--</el-radio-group>-->
                    <!--<div class="right">-->
                        <!--<el-input placeholder="请输入内容" v-model="searchText" clearable>-->
                            <!--<el-button slot="append" icon="el-icon-search" @click="loadData" type="primary"></el-button>-->
                        <!--</el-input>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</el-tab-pane>-->
        <!--</el-tabs>-->

        <el-menu :default-active="activeMemberType" mode="horizontal" class="tab_menu_check_bill">
            <el-menu-item index="platform" @click="onSwitchMemberType('platform')">平台会员<MarkRemind :tipsNum="this.memberTips.memberCountMap.memberCheckPendingTotalCount"></MarkRemind></el-menu-item>
            <el-menu-item index="fumin" @click="onSwitchMemberType('fumin')">富民会员<MarkRemind :tipsNum="this.memberTips.fBankFailedCount"></MarkRemind></el-menu-item>
        </el-menu>
        <el-col :span="24">
            <div class="clear display_style" v-if="activeMemberType == 'platform'">
                <el-radio-group v-model="memberStatus.platform" class="left" @change="onSwitchMemberStatus" size="small">
                    <el-radio-button label="0">全部</el-radio-button>
                    <el-radio-button label="1">联系人信息</el-radio-button>
                    <el-radio-button label="2">企业认证<MarkRemind :tipsNum="this.memberTips.memberCountMap.enterpriseCheckPendingCount" class="bid_tips"></MarkRemind></el-radio-button>
                    <el-radio-button label="3">业务授权<MarkRemind :tipsNum="this.memberTips.memberCountMap.agentTreasurerCheckPendingCount" class="bid_tips"></MarkRemind></el-radio-button>
                    <el-radio-button label="4">账户绑定</el-radio-button>
                    <el-radio-button label="5">认证完成</el-radio-button>
                </el-radio-group>
                <div class="check_bill_int">
                    <el-input placeholder="企业名称/联系人/联系方式/关联中介/渠道代理/邀请人" v-model="searchText" clearable @clear="loadData()"></el-input>
                    <el-button type="primary" size="small" @click="loadData()">搜索</el-button>
                </div>
            </div>
            <div class="clear" v-if="activeMemberType == 'fumin'">
                <el-radio-group v-model="memberStatus.fumin" class="left" @change="onSwitchMemberStatus">
                    <el-radio-button label="0">全部</el-radio-button>
                    <el-radio-button label="1">审核通过</el-radio-button>
                    <el-radio-button label="2">审核失败<MarkRemind :tipsNum="this.memberTips.fBankFailedCount" class="bid_tips"></MarkRemind></el-radio-button>
                </el-radio-group>
                <div class="right">
                    <el-input placeholder="请输入内容" v-model="searchText" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="loadData" type="primary"></el-button>
                    </el-input>
                </div>
            </div>
        </el-col>
        <el-table :data="tableData" style="width: 100%" stripe class="btn_margin_style" :height="tableHeight">
            <el-table-column label="创建日期" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.createTimeY}}</span><br/><span>{{scope.row.createTimeH}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="enterpriseName" label="企业名称"> </el-table-column>
            <el-table-column prop="customerName" label="联系人"> </el-table-column>
            <el-table-column prop="phoneNumber" label="联系方式"> </el-table-column>
            <el-table-column prop="enterpriseId" label="ID"> </el-table-column>
            <el-table-column prop="simpleEnterpriseName" label="关联中介"> </el-table-column>
            <el-table-column prop="channelAgent" label="渠道代理"> </el-table-column>
            <el-table-column prop="salesman" label="注册业务员"> </el-table-column>
            <el-table-column prop="inviterName" label="邀请人"> </el-table-column>
            <el-table-column prop="checkStatus" label="审核状态"> </el-table-column>
            <el-table-column label="审核时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.checkedTimeY}}</span><br/><span>{{scope.row.checkedTimeH}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="checkerName" label="审核人"> </el-table-column>
            <el-table-column prop="overdue" label="是否逾期" width="80" key="1" v-if="isPlatform">
                <template slot-scope="scope">
                    <span :style="{ color: scope.row.overdue === '是' ? 'red' : 'inherit'}">{{scope.row.overdue}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right"> 
                <template slot-scope="scope">
                    <el-button @click="onRemoveInfo(scope.row)" type="text" size="small" v-if="removeBtnCanUse(scope.row)"><i class="iconfont icon-shanchu icon_edit_style"></i> 删除</el-button>
                    <el-button @click="onModifyInfo(scope.row)" type="text" size="small" v-if="modifyBtnCanUse(scope.row)"><i class="iconfont icon-xiugai icon_edit_style"></i> 修改</el-button>
                    <el-button @click="onViewInfo(scope.row)" type="text" size="small"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详情</el-button>
                    <el-button @click="onCheckInfo(scope.row)" size="small" v-if="checkBtnCanUse(scope.row)" class="check_btn_style">审核</el-button>
                    <el-button @click="onOpenAccount(scope.row)" size="small" v-if="openAccountBtnCanUse(scope.row)" class="check_btn_style">开户</el-button>
                    <el-button @click="onResendContract(scope.row)" size="small" v-if="resendContractBtnCanUse(scope.row)" class="check_btn_style">重发合同</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear pagingbar">
            <el-pagination
            @size-change="onSizeChange"
            @current-change="onFlipOver"
            :current-page="pagination.currentPage"
            :page-sizes="pagination.pageSizes"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
            </el-pagination>
        </div>
        <MemberDetail ref="memberdetail"></MemberDetail>
        <FuMinDetail ref="fumindetail"></FuMinDetail>
        <MemberModify ref="membermodify"></MemberModify>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
    import Pagination from "@/types/Pagination";
    import MemberDetail from './Detail.vue';
    import MemberModify from './Modify.vue';
    import FuMinDetail from './FuMinDetail.vue';
    import MarkRemind from '@component/common/MarkRemind.vue';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
    import moment from 'moment';
    // import { MemberStatus } from '@/util/constant'
    var memberStore = namespace('member')

    @Component({
        extends: Pagination,
        components: {
            MemberDetail,
            MemberModify,
            FuMinDetail,
            MarkRemind
        },
        computed: {
            ...mapState([
                'allTips',
                'memberTips'
            ])
        },
        methods: {
            ...mapActions([
                'getAllTips',
                'getMemberTips'
            ])
        }
    })
    export default class MemberCheck extends Vue {
        @memberStore.Action('loadPlatformDetail') loadPlatformDetail!:Function;
        @memberStore.Action('loadFuMinDetail') loadFuMinDetail!:Function;


        // ------------------- data -------------------
        activeMemberType = 'platform'
        tableData = []
        searchText = ''
        memberStatus = {
            platform: 0,
            fumin: 0
            // platforms: [ 'all', 'linkman', 'approve', 'authorization', 'relateAccount', 'finish' ]
        };
        memberType = {
            platform: 0,
            fumin: 0
        };

        // ------------------- computed -------------------
        get isPlatform() {
            return this.activeMemberType === 'platform'
        }
        get memberState() {
            return Number(this.memberStatus.platform)
        }
        get fuMinMemberState() {
            return Number(this.memberStatus.fumin)
        }
        get tableHeight() {
            return window.innerHeight-(60+40+14+15+98)-52;
        }
        // ------------------- methods -------------------
        /**
         * 加载平台会员
         */
        async loadPlatformMember() {
            let res = await this.$http.post('hpxMemberReview/getAllPage', {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                number: this.memberState,
                key: this.searchText
            })
            let { items, totalNum } = res.data;
            items.forEach((i) => {
                if (i.createTime != '--' && i.createTime != '' && i.createTime != null && i.createTime != undefined) {
                    i.createTimeY = moment(i.createTime).format('YYYY-MM-DD')
                    i.createTimeH = moment(i.createTime).format('HH:mm:ss')
                } else {
                    i.createTimeY = '--'
                }
                if (i.checkedTime != '--' && i.checkedTime != '') {
                    i.checkedTimeY = moment(i.checkedTime).format('YYYY-MM-DD')
                    i.checkedTimeH = moment(i.checkedTime).format('HH:mm:ss')
                } else {
                    i.checkedTimeY = '--'
                }
            })
            this.tableData = items;
            this.pagination.total = totalNum;
        }

        /**
         * 加载富民会员
         */
        async loadFuMinMember() {
            let res = await this.$http.post('fBankMemberReview/getFBankMemberReviewPage', {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                number: this.fuMinMemberState,
                key: this.searchText
            })
            let { items, totalNum } = res.data;
            items.forEach((i) => {
                if (i.createTime != '--' && i.createTime != '' && i.createTime != null && i.createTime != undefined) {
                    i.createTimeY = moment(i.createTime).format('YYYY-MM-DD')
                    i.createTimeH = moment(i.createTime).format('HH:mm:ss')
                } else {
                    i.createTimeY = '--'
                }
                if (i.checkedTime != '--' && i.checkedTime != '') {
                    i.checkedTimeY = moment(i.checkedTime).format('YYYY-MM-DD')
                    i.checkedTimeH = moment(i.checkedTime).format('HH:mm:ss')
                } else {
                    i.checkedTimeY = '--'
                }
            })
            this.tableData = items;
            this.pagination.total = totalNum;
        }

        /**
         * 根据当前会员类型加载会员列表
         */
        loadData() {
            this.activeMemberType === 'platform' ? this.loadPlatformMember() : this.loadFuMinMember();
        }

        // _11 = 11, // "业务授权未成功的联系人"
        // _12 = 12, // "业务授已成功的联系人"

        // _21 = 21, // "企业审核失败"
        // _22 = 22, // "企业待审核"
        // _23 = 23, // "企业审核成功"

        // _31 = 31, // "业务授权审核失败"
        // _32 = 32, // "业务授权待审核"
        // _33 = 33, // "业务授权审核成功"

        // _41 = 41, // "小额鉴权失败"
        // _42 = 42, // "待小额鉴权"
        // _43 = 43, // "小额鉴权成功"
        // _44 = 44, // "账户待开户"

        /**
         * 业务授权审核成功之前可修改
         */
        modifyBtnCanUse({ currentStatus }:any) {
            return currentStatus < 33 && currentStatus != 12
        }

        /**
         * 审核成功之前可审核
         */
        checkBtnCanUse({ currentStatus }:any) {
            return (currentStatus > 20 && currentStatus < 23) || (currentStatus < 33 && currentStatus != 11 && currentStatus != 12)
        }

        /**
         * 兴业电子合同未发送失败需重发
         */
        resendContractBtnCanUse({ is_eContractUser, currentStatus }:any) {
            return (is_eContractUser === "N" && currentStatus == 23)
        }

        /**
         * 账户绑定后开户
         */
        openAccountBtnCanUse({ currentStatus }:any) {
            return currentStatus == 44
        }

        /**
         * 删除已绑定的银行账户
         */
        removeBtnCanUse({ currentStatus }:any) {
            return currentStatus > 40 && currentStatus != 43 && this.memberState !== 5
        }

        /**
         * 银行账户绑定 开户
         */
        async xingYeOpenAccount(enterpriseId:string) {
            let res = await this.$http.get(`paying/xingyeapi/xingYeOpenAccount/open/${enterpriseId}`)
            this.requestResultPrompt(res);
        }

        /**
         * 删除银行卡号
         */
        async removeBankAccount(bankAccountId:string) {
            let res = await this.$http.delete(`xingye/account/${bankAccountId}`)
            this.requestResultPrompt(res);
        }

        /**
         * 机构审核
         */
        async customerReview(enterpriseId:string) {
            this.$refs.membermodify.open();
        }

        /**
         * 业务授权审核
         */
        async AgentTreasurerReview(enterpriseId:string) {
            this.$refs.membermodify.open();
        }

        /**
         * 重发电子合同
         */
        async resendContract(enterpriseId:string) {
            let res = await this.$http.get(`paying/xingyeapi/econtract/register/${enterpriseId}`)
        }

        /**
         * 处理结果提示
         */
        requestResultPrompt(res) {
            // if (!res.success) {
            //     this.$alert(res.msg,'提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box',
            //         callback:action => {}
            //     })
            //     return
            // }
            if (res.status < 300) {
                this.$message(res.msg)
            }
        }

        /**
         * 获取当前行的所在状态
         */
        getCurrentRowStatus({ currentStatus }:any) {
            var status = 0
            if (this.memberState === 0) {
                if(currentStatus > 10 && currentStatus < 20) {
                    status = 1;
                }
                if(currentStatus > 20 && currentStatus < 30) {
                    status = 2;
                }
                if(currentStatus > 30 && currentStatus < 40) {
                    status = 3;
                }
                if(currentStatus > 40) {
                    status = 4;
                }
            }
            return status > 0 ? status : this.memberState;
        }

        // ---------- event ----------
        /**
         * 会员详情
         */
        onViewInfo(row:any) {
            const self = this;
            const memberState = this.getCurrentRowStatus(row);
            if (this.activeMemberType === 'platform') {
                this.loadPlatformDetail({
                    customerId: row.customerId,
                    enterpriseId: row.enterpriseId,
                    inviterName: row.inviterName,
                    agentTreasurerId: row.agentTreasurerId,
                    bankAccountId: row.bankAccountId,
                    number: this.getCurrentRowStatus(row)
                }).then(function(res:any) {
                    if (!res.data) {
                        self.$notify({
                            title: '消息',
                            message: '数据为空',
                        });
                        return
                    }
                    self.$refs.memberdetail.open(memberState)
                })
                return
            }

            this.loadFuMinDetail(row.enterpriseId)
            .then(function(res:any) {
                if (!res.data) {
                    self.$notify({
                        title: '消息',
                        message: '数据为空',
                    });
                    return
                }
                self.$refs.fumindetail.open()
            })
        }

        /**
         * 显示修改会员信息
         */
        onModifyInfo(row:any) {
            const self = this;
            let memberState = this.getCurrentRowStatus(row)
            this.loadPlatformDetail({
                customerId: row.customerId,
                enterpriseId: row.enterpriseId,
                inviterName: row.inviterName,
                agentTreasurerId: row.agentTreasurerId,
                bankAccountId: row.bankAccountId,
                number: memberState,
            }).then(function(res:any) {
                if (!res.data) {
                    self.$notify({
                        title: '消息',
                        message: '数据为空',
                    });
                    return
                }
                self.$refs.membermodify.open(memberState);
            })
        }

        /**
         * 审核操作
         * 1. 企业认证审核
         * 2. 业务授权审核
         */
        onCheckInfo(row: any) {
            const self = this;
            let memberState = this.getCurrentRowStatus(row)
            this.loadPlatformDetail({
                customerId: row.customerId,
                enterpriseId: row.enterpriseId,
                inviterName: row.inviterName,
                agentTreasurerId: row.agentTreasurerId,
                bankAccountId: row.bankAccountId,
                number: memberState
            }).then(function(res:any) {
                if (!res.data) {
                    self.$notify({
                        title: '消息',
                        message: '数据为空',
                    });
                    return
                }
                self.$refs.membermodify.openReview(memberState);
            })
        }

        /**
         * 开户
         */
        onOpenAccount({ enterpriseId }: any) {
            this.xingYeOpenAccount(enterpriseId)
        }

        /**
         * 删除
         */
        onRemoveInfo({ bankAccountId }: any) {
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.removeBankAccount(bankAccountId);
            }).catch(() => {});
        }

        /**
         * 重发合同
         */
        onResendContract({ enterpriseId }: any) {
            this.resendContract(enterpriseId)
        }

        /**
         * 关键字搜索
         */
        onEnter(e:Event) {
            this.loadData();
        }

        onSwitchMemberType(memberType:string) {
            this.activeMemberType = memberType;
            this.pagination.currentPage = 1
            this.resetPagination();
            memberType === 'platform' ? this.loadPlatformMember() : this.loadFuMinMember();
        }

        onSwitchMemberStatus() {
            this.loadData();
        }

        loadDataForPagination() {
            this.onSwitchMemberStatus()
        }

        // ------------------- lifecycle -------------------
        created () {
            // let promise = this.getMemberTips()
            // promise.then(() => {
            //     this.loadData()
            //     console.log(this.memberTips.memberCountMap.memberCheckPendingTotalCount)
            // })
        }
        mounted() {
            this.loadData()
            this.getMemberTips()
        }
    }
</script>

<style scoped lang="scss">
    .bid_tips {
        position: absolute;
        top: 0;
        right: 0;
    }

</style>
<style lang="scss">
    #tab-fumin {
        padding-right: 20px;
    }
    .display_style {
        .el-radio-button--small {
            .el-radio-button__inner {
                padding: 9px 22px;
            }
        }
    }
</style>